<template>
  <el-container>
    <!-- 侧边树型 -->
    <el-aside  class="aside-handle">
      <el-menu @select="menuSelected">
        <template v-for="item in logCategoryList">
          <el-menu-item :index="item.B_ItemValue" :key="item.B_ItemDetailId">
            <i class="el-icon-reading"></i>
            <span slot="title">{{item.B_ItemName}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :proxy-config="tableProxy"
        pager-config
        :sort-config="{remote:true, defaultSort: { field: 'B_OperateTime', order: 'desc' }}"
        :expand-config="{labelField: 'B_ExecuteAddress'}"
      >
        <!-- 多条件查询 -->
        <template v-slot:toolbar_search>
          <rayd-multi-query
            v-model="queryEntity"
            @query="$refs[`mainTable`].commitProxy(`reload`)"
          >
            <vxe-form-item title="请求方式">
              <rayd-select options="HttpMethod" v-model="queryEntity.B_HttpMethod"></rayd-select>
            </vxe-form-item>
            <vxe-form-item title="执行地址">
              <el-input v-model="queryEntity.B_ExecuteAddress"></el-input>
            </vxe-form-item>
            <vxe-form-item title="操作模块">
              <el-input v-model="queryEntity.B_OperateModule"></el-input>
            </vxe-form-item>
            <vxe-form-item title="操作日期">
              <rayd-date-picker
                type="datetimerange"
                v-model="queryEntity.B_OperateTime"
              ></rayd-date-picker>
            </vxe-form-item>
          </rayd-multi-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-popover
            placement="left"
            width="160"
            v-model="popoverVisible"
            v-permission-btn="'Clear'"
          >
            <div>
              <rayd-select options="LogKeepTime" v-model="KeepTime"></rayd-select>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="ClearLog">确定</el-button>
              </div>
            </div>
            <el-button round slot="reference" type="warning" icon="el-icon-delete">清空日志</el-button>
          </el-popover>
          <el-divider direction="vertical"></el-divider>
        </template>
        <!-- 执行结果模板 -->
        <template v-slot:B_ExecuteResult="{ row }">
          <el-tag
            :type="row.B_ExecuteResult === 0 ? 'danger' : 'success'"
          >{{ row.B_ExecuteResult == 0 ? "失败" : "成功" }}</el-tag>
        </template>
        <!-- 执行地址模板 -->
        <template v-slot:cellExpand="{ row }">
          <el-card>
            <el-form label-position="left" class="table-expand">
              <el-form-item label="执行地址">
                <el-input v-model="row.B_ExecuteAddress" readonly>
                  <template slot="prepend"></template>
                </el-input>
              </el-form-item>
              <el-form-item label="执行参数">
                <el-input type="textarea" autosize readonly v-model="row.B_ExecuteArguments"></el-input>
              </el-form-item>
              <el-form-item label="执行结果">
                <el-input type="textarea" autosize readonly v-model="row.B_ExecuteResultJson"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </template>
      </vxe-grid>
    </el-main>
  </el-container>
</template>

<script> 
import { Log } from "@/api";
export default {
  data() {
    return {
      /* vxe-grid */
      queryEntity: {}, //查询实体
      //工具栏配置
      tableToolbar: {
        refresh: true,
        zoom: true,
        custom: true,
        
      },
      //列配置
      tableColumn: [
        {
          type: "seq",
          title: "序号",
          width: 80,
          align: "left",
        },
        {
          type: "expand",
          width: 250,
          title: "执行地址",
          align: "left",
          slots: { content: "cellExpand" },
        },
        {
          field: "B_OperateTime",
          title: "操作时间",
          width: 200,
          sortable: true,
          formatter: ["toDateString", "yyyy-MM-dd HH:mm:ss"],
        },
        {
          field: "B_OperateAccount",
          title: "操作用户",
          width: 150,
          sortable: true,
        },
        {
          field: "B_OperateModule",
          title: "操作模块",
          width: 150,
          sortable: true,
        },
        {
          field: "B_HttpMethod",
          title: "请求方式",
          width: 150,
          sortable: true,
        },
        {
          field: "B_ExecuteResult",
          title: "执行结果",
          width: 100,
          sortable: true,
          slots: { default: "B_ExecuteResult" },
        },
        { field: "B_IPAddress", title: "IP地址", width: 150, sortable: true },
        { field: "B_Host", title: "主机", width: 150, sortable: true },
        { field: "B_Browser", title: "浏览器", width: 150, sortable: true },
      ],
      //数据代理配置
      tableProxy: {
        seq: true, // 启用动态序号代理
        sort: true, // 启用排序代理
        autoLoad: false, //是否自动加载查询数据
        ajax: {
          // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）
          query: ({ page, sort, filters }) => {
            //选中了日志类别才可以查询
            if (this.util.validateNull(this.B_CategoryId)) {
              this.$message.warning("请先选择日志类别！");
              return;
            }
            //添加查询条件
            this.queryEntity.B_CategoryId = this.B_CategoryId;

            page.sidx = sort.property;
            page.sord = sort.order;
            return Log.GetPageList({
              queryjson: JSON.stringify(this.queryEntity),
              pagination: JSON.stringify(page),
            }).then((res) => {
              return res;
            });
          },
        },
      },
      /* 实体数据 */
      logCategoryList: this.util.getDataItemList("LogCategory"), //日志类别数据（数据字典）
      logKeepTimeList: this.util.getDataItemList("LogKeepTime"), //日志保留时间数据（数据字典）
      httpMethodList: this.util.getDataItemList("HttpMethod"), //请求方式数据（数据字典）
      popoverVisible: false, //popover是否可见

      B_CategoryId: "", //选中的日志类别
      KeepTime: "", //日志保留时间
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);

      this.$store.commit("SET_ISLOADING",false);
    },
    //菜单选择回调
    menuSelected(index, indexPath) {
      this.B_CategoryId = index; //存储选择节点
      this.$refs["mainTable"].commitProxy("reload"); // 刷新表格
    },
    //清除日志
    ClearLog() {
      //选中了日志类别才可以清除
      if (this.util.validateNull(this.B_CategoryId)) {
        this.$message.warning("请先选择日志类别！");
        return;
      } else if (this.util.validateNull(this.KeepTime)) {
        this.$message.warning("请先选择要清除的日期段！");
        return;
      }
      Log.ClearLog({
        logCategory: this.B_CategoryId,
        logKeepTime: this.KeepTime,
      }).then((res) => {
        this.popoverVisible = false; //关闭弹窗
        this.$refs["mainTable"].commitProxy("reload"); // 刷新表格
      });
    },
  },

};
</script>

<style lang="less" scoped>
.el-menu {
  height: 100%;
  text-align: left;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>